<template>
  <div class="change-card">
    <div class="go-back">
      <el-button type="primary" @click="goback()">返回</el-button>
    </div>
    <div class="title">修改银行卡</div>
    <div class="nav-title">
      <div>修改类型</div>
      <div>
        <el-radio v-model="params.type" :label="1">不变更计算人</el-radio>
        <el-radio v-model="params.type" :label="2">变更结算人</el-radio>
      </div>
    </div>
    <div class="nav-title" v-if="params.type===2" style="width:403px">
      <div>账户类型</div>
      <div>
        <el-radio v-model="params.account_type" :label="1">对公账号</el-radio>
        <el-radio v-model="params.account_type" :label="2">法人对私</el-radio>
        <el-radio v-model="params.account_type" :label="3">非法人对私</el-radio>
      </div>
    </div>
    <el-form
      label-position="right"
      :model="params"
      label-width="140px"
      :rules="rules"
      ref="ruleForm"
    >
      <el-form-item label="开户人：" style="width:340px" prop="holder_name">
        <el-input v-model.trim="params.holder_name" :disabled="params.type===1?true:false"></el-input>
      </el-form-item>
      <el-form-item label="开户行：" style="width:340px" prop="bank_no">
        <el-select v-model="params.bank_no" placeholder="请选择">
          <el-option
            v-for="({bank_name,id}) in bankOptions"
            :key="id"
            :label="bank_name"
            :value="id"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="开户支行：" style="width:400px" prop="branch_name">
        <el-autocomplete
          :disabled="params.bank_no?false:true"
          v-model.trim="params.branch_name"
          style="width:400px"
          :fetch-suggestions="querySearchAsync"
          placeholder="请输入要搜索的支行名称"
          valueKey="branch_name"
          :debounce="2000"
          @select="handleSelect"
        ></el-autocomplete>
      </el-form-item>
      <el-form-item label="银行卡号：" style="width:340px" prop="card_no">
        <el-input type="number" v-model.trim="params.card_no"></el-input>
      </el-form-item>
      <div v-if="params.type===2">
        <!-- 非法人对私 -->
        <div v-if="params.account_type===3">
          <div class="hint">非法人结算卡变更需要提交以下资质文件审核修改</div>
          <el-form-item label="结算账户指定书:" style="width:340px">
            <upload
              :imgUrl="params.auth_for_settlement"
              paramKey="auth_for_settlement"
              imgType="AUTHORIZATION_FOR_SETTLEMENT"
              :callback="imgCallback"
            />
          </el-form-item>
          <el-button type="text" @click="downLoad()">下载模板,下载模板后填写打印拍照上传</el-button>
          <el-form-item label="结算人手持身份照：" style="width:340px">
            <upload
              :imgUrl="params.handheld_idcard"
              paramKey="handheld_idcard"
              imgType="HANDHELD_OF_ID_CARD"
              :callback="imgCallback"
            />
          </el-form-item>
          <el-form-item label="结算人手持银行卡：" style="width:340px">
            <upload
              :imgUrl="params.handheld_bankcard"
              paramKey="handheld_bankcard"
              imgType="HANDHELD_OF_BANK_CARD"
              :callback="imgCallback"
            />
          </el-form-item>
        </div>
        <!-- 法人对私 -->
        <!-- <div v-if="params.account_type===2"> -->
        <el-form-item label="结算卡照片：" style="width:340px">
          <upload
            :imgUrl="params.settle_bankcard"
            paramKey="settle_bankcard"
            imgType="BANK_CARD"
            :callback="imgCallback"
          />
        </el-form-item>
        <el-form-item label="身份证正面照：" style="width:340px">
          <upload
            :imgUrl="params.settler_idcard_front"
            paramKey="settler_idcard_front"
            imgType="FRONT_OF_ID_CARD"
            :callback="imgCallback"
          />
        </el-form-item>
        <el-form-item label="身份证反面照：" style="width:340px">
          <upload
            :imgUrl="params.settler_idcard_backend"
            paramKey="settler_idcard_backend"
            imgType="BACK_OF_ID_CARD"
            :callback="imgCallback"
          />
        </el-form-item>
        <!-- </div> -->
        <!-- 对公账号 -->
        <el-form-item v-if="params.account_type===1" label="开户许可证或其他证明图片：" style="width:340px">
          <upload
            :imgUrl="params.permit_bank_account"
            paramKey="permit_bank_account"
            imgType="PERMIT_FOR_BANK_ACCOUNT"
            :callback="imgCallback"
          />
        </el-form-item>
      </div>
      <el-form-item style="margin-bottom:80px;width:340px">
        <el-button @click="cancel('ruleForm')">取消</el-button>
        <el-button type="primary" @click="submit('ruleForm')">{{params.type===2?"提交审核":"修改"}}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
// 修改银行卡
import upload from './component/upload'
import { settleCard } from '@/api/merchant-admin/change-card'
import { base, getBankList, branchSearch } from '@/api/merchant-admin'
export default {
  components: {
    upload
  },
  data() {
    return {
      params: {
        type: 1,
        account_type: 1,
        bank_no: '',
        holder_name: '',
        branch_name: '',
        branch_no: '',
        card_no: '',
        auth_for_settlement: '',
        settle_bankcard: '',
        settler_idcard_front: '',
        settler_idcard_backend: '',
        handheld_idcard: '',
        handheld_bankcard: '',
        permit_bank_account: ''
      },
      idList: {
        auth_for_settlement: '',
        settle_bankcard: '',
        settler_idcard_front: '',
        settler_idcard_backend: '',
        handheld_idcard: '',
        handheld_bankcard: '',
        permit_bank_account: ''
      },
      rules: {
        holder_name: [
          { required: true, message: '请输入开户人', trigger: 'blur' }
        ],
        bank_no: [
          { required: true, message: '请选择开户行', trigger: 'change' }
        ],
        branch_name: [
          { required: true, message: '请输入开户支行', trigger: 'blur' }
        ],
        card_no: [
          { required: true, message: '请输入银行卡号', trigger: 'blur' }
        ]
      },
      bankOptions: []
    }
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      const { id, name } = vm.$route.query
      vm.id = id
      vm.params.holder_name = name
      vm.getBankList()
    })
  },
  beforeRouteLeave(to, from, next) {
    Object.assign(this.$data, this.$options.data())
    this.$nextTick(() => {
      this.$refs['ruleForm'].resetFields()
    })
    next()
  },
  methods: {
    // 图片组件回调
    imgCallback({ url, id, key }) {
      this.params[key] = url
      this.idList[key] = id
    },
    // 获取银行卡列表
    getBankList() {
      getBankList().then(res => {
        this.bankOptions = res
      })
    },
    // 搜索支行
    querySearchAsync(queryString, callback) {
      if (queryString) {
        branchSearch({
          id: this.params.bank_no,
          name: this.params.branch_name
        }).then(res => {
          callback(res)
        })
      }
    },
    // 选中支行
    handleSelect({ branch_no }) {
      this.params.branch_no = branch_no
    },
    // 取消
    cancel(formName = 'ruleForm') {
      this.$confirm('确认取消修改吗?', '取消操作？', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          this.goback()
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    submit(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          const { type, account_type } = this.params
          let params = { ...this.params }
          params.account_type = type === 1 ? '' : account_type
          // 校验图片
          let flag = this.formatParams()
          if (flag) {
            Object.assign(params, this.idList)
            settleCard({ id: this.id, params }).then(res => {
              this.$message({
                type: 'success',
                message: '修改成功'
              })
              setTimeout(() => {
                this.goback()
              }, 1000)
            })
          }
        }
      })
    },
    // 校验参数
    formatParams() {
      const {
        type,
        account_type,
        permit_bank_account,
        settle_bankcard,
        settler_idcard_front,
        settler_idcard_backend,
        auth_for_settlement,
        handheld_idcard,
        handheld_bankcard
      } = this.params
      if (type === 2) {
        if (!settle_bankcard) {
          this.formathint('settle_bankcard')
          return false
        }
        if (!settler_idcard_front) {
          this.formathint('settler_idcard_front')
          return false
        }
        if (!settler_idcard_backend) {
          this.formathint('settler_idcard_backend')
          return false
        }
        if (account_type === 1) {
          if (!permit_bank_account) {
            this.formathint('permit_bank_account')
            return false
          }
        }
        if (account_type === 3) {
          if (!auth_for_settlement) {
            this.formathint('auth_for_settlement')
            return false
          }
          if (!handheld_idcard) {
            this.formathint('handheld_idcard')
            return false
          }
          if (!handheld_bankcard) {
            this.formathint('handheld_bankcard')
            return false
          }
        }
        return true
      } else {
        return true
      }
    },
    // 校验提示
    formathint(value) {
      const list = [
        {
          type: 'auth_for_settlement',
          message: '结算账户指定书'
        },
        {
          type: 'settle_bankcard',
          message: '结算卡照片'
        },
        {
          type: 'settler_idcard_front',
          message: '身份证正面照'
        },
        {
          type: 'settler_idcard_backend',
          message: '身份证反面照'
        },
        {
          type: 'handheld_idcard',
          message: '结算人手持身份照'
        },
        {
          type: 'handheld_bankcard',
          message: '结算人手持银行卡'
        },
        {
          type: 'permit_bank_account',
          message: '开户许可证或其他证明图片'
        }
      ]
      const { message } = list.find(i => i.type === value)
      this.$message({
        type: 'error',
        message: `请上传${message}`
      })
    },
    downLoad() {
      base().then(res => {
        window.open(`${res.settle_auth_doc}`, '_self')
      })
    },
    goback() {
      this.$router.go(-1)
    }
  }
}
</script>

<style lang="scss" scoped>
.change-card {
  width: 100%;
  height: 100%;
  padding: 0 34%;
  box-sizing: border-box;
  .go-back {
    width: 100%;
    display: flex;
    justify-items: flex-start;
    align-items: center;
    margin: 0 0 15px 20px;
  }
  .title {
    font-size: 16px;
    font-weight: bold;
  }
  .nav-title {
    width: 320px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 14px;
    margin: 15px 0 15px 20px;
  }
  .hint {
    width: 100%;
    font-size: 14px;
    text-align: left;
    margin: 20px;
  }
}
</style>